<template>
    <div id="xe2Container" ref="xe2Container"></div>
    <div class="layout">
        <Left></Left>
        <Right></Right>
        <Header></Header>
        <Footer></Footer>
        <div class="toggle-viewer" :title="viewerType === 'ue' ? '切换为Cesium视口' : '切换为UE视口'" @click.stop="toggleViewer">
            <Loop></Loop>
        </div>
    </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import { Message } from "earthsdk-ui";
import { Loop } from "earthsdk-icon";
import Header from "./components/Header.vue"
import Footer from "./components/Footer.vue"
import Right from "./components/Right.vue"
import Left from "./components/Left.vue"
import getMyProjectManager from './scripts/getMyProjectManager';

const xe2Container = ref(null)
const myProjectManager = getMyProjectManager();

const viewerType = ref('');

const toggleViewer = () => {
    if (viewerType.value === 'czm') {
        const opt = {
            domid: xe2Container.value,
            uri: 'http://114.242.26.126:30001',
            app: '培训专用测试场景'
        }
        myProjectManager.switchToUEViewer(opt);
    } else {
        const opt = { domid: xe2Container.value }
        myProjectManager.switchToCesiumViewer(opt);
    }
}


onMounted(() => {
    if (!xe2Container.value) {
        console.error(`!xe2Container.value`);
        return
    }
    myProjectManager.createCesiumViewer(xe2Container.value);

    const dispose = myProjectManager.viewerCreatedEvent.don((viewer) => {
        Message.success('成功初始化场景');
        (viewerType.value === 'czm') ? (viewerType.value = 'ue') : (viewerType.value = 'czm');
    })

    onBeforeUnmount(() => {
        dispose()
    })

})



</script>

<style>
html,
body,
#app,
#xe2Container {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.toggle-viewer {
    position: fixed;
    top: 100px;
    left: 400px;
    z-index: 1000;
    width: 50px;
    height: 26px;
    border-radius: 5px;
    background-color: #001B22;
    border: 1px solid #527379;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s;
}

.toggle-viewer:hover {
    color: #77D9F2;
}
</style>
